<<<<<<< HEAD
<template>
  <div class="com-title" :style="styleObj">
    <p @click="elbtn">我是外部组件里面的com-title{{ num }}</p>
    <p @click="click" v-for="(item,index) in dataArr" :key="index">{{ item.value }}</p>
    {{type}}
  </div>
</template>

<script>
import {reactive, toRefs} from "vue";

export default {
  a: 12,
  name: __NAME__,
  props: {
    type: {
      type: String,
      default: '111'
    },
    dataList: {
      type: Array,
      default: [{value: '我是外部组件里面'}]
    },
    num1: {
      type: Number,
      default: 1,
      rules: {
        min: 1,
        max: 10,
        test: 5
      }
    },
    styleObj: {
      type: Object,
      default: {
        width: '300px',
        height: '300px'
      },
      rules: {
        min: 1,
        max: 10,
        test: 5
      }
    }
  },
  emits: ['elbtn'],
  setup(props, ctx) {
    /**
     * 数据
     * */
    const state = reactive({
      dataArr: [],
      num: 0
    })
    /**
     * 更新组件配置，接收的入参config是修改后的新配置。
     */
    function update() {
      console.log('update')
    }

    /**
     * 点击事件
     */
    function click() {
      state.num++
      console.log(state.num)
    }
    /**
     * 自定义事件
     */
    function elbtn() {
      ctx.emit('elbtn', '点我干嘛')
    }

    return {
      ...toRefs(state),
      click,
      elbtn,
      update
    }
  },
}
</script>
<style scoped>
.com-title {
  padding: 19px;
}
</style>
=======
<template>
  <div class="com-title" :style="styleObj">
    <p @click="elbtn">我是外部组件里面的com-title{{ num }}</p>
    <p @click="click" v-for="(item,index) in dataArr" :key="index">{{ item.value }}</p>
  </div>
</template>

<script>
import {reactive, toRefs, watch} from "vue";
import config from "./config";

export default {
  config: config,
  name: __NAME__,
  props: {
    dataList: {
      type: Array,
      default: [{value: '我是外部组件里面'}]
    },
    num1: {
      type: Number,
      default: 1,
      rules: {
        min: 1,
        max: 10,
        test: 5
      }
    },
    styleObj: {
      type: Object,
      default: {
        width: '300px',
        height: '300px'
      },
      rules: {
        min: 1,
        max: 10,
        test: 5
      }
    }
  },
  emits: ['elbtn'],
  setup(props, ctx) {
    /**
     * 数据
     * */
    const state = reactive({
      dataArr: [],
      num: 0
    })
    watch(() => props.styleObj,()=> {
      console.log(props.styleObj)
    },{
      immediate: true,
      deep: true
    })
    /**
     * 更新组件配置，接收的入参config是修改后的新配置。
     */
    function update() {
      console.log('update')
    }

    /**
     * 点击事件
     */
    function click() {
      state.num++
      console.log(state.num)
    }
    /**
     * 自定义事件
     */
    function elbtn() {
      ctx.emit('elbtn', '点我干嘛')
    }

    return {
      ...toRefs(state),
      click,
      elbtn,
      update
    }
  },
}
</script>
<style scoped>
.com-title {
  padding: 19px;
}
</style>
>>>>>>> c7d464724176cfa814abbe8318e47d1b03568e4c
